import React, { useEffect, useState } from 'react'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import * as echarts from 'ec5';
import { connect } from 'dva'

import Options from './options'
import Data from './data'
import LoadSty from '../../../../utils/hooks'
import { isUndefined,isEmpty } from 'lodash'

function Index({ dva }) {

    let [Load, setLoad] = useState('flex')

    const InitCreateApp = (config) => {
        var myChart = echarts.init(document.getElementById('Trccom'));
        // 绘制图表
        myChart.setOption(Options(config));
    }

    useEffect(() => {
        InitCreateApp(Data)
    }, [])

    useEffect(() => {
        console.log(dva);
        console.log(isEmpty(dva));
        if (!isEmpty(dva)) {
            setLoad('none')
        }
        InitCreateApp(dva)
    }, [dva])

    return (
        <BorderBox1 style={{ flex: 4 }} >
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div id="Trccom" style={{ width: '95%', height: '95%' }}></div>
        </BorderBox1>
    )
}

const mapStateToProps = ({ centerTop }, ownProps) => {
    return {
        dva: centerTop
    }
}

const A = connect(mapStateToProps)(Index)
export default A